<template>
  <div class="box">
    <el-drawer
      :visible.sync="ishTrav"
      title="新增费用报销"
      :append-to-body="true"
      direction="rtl"
      size="900px"
      :with-header="false"
      :before-close="handleClose"
      @close="close"
    >
      <div style="padding-bottom: 50px;">
        <el-form ref="form" label-position="right" :inline="false" :model="form">
          <el-card>
            <p class="title">基本信息</p>
            <!-- <div slot="header" class="clearfix">
              <span>基本信息</span>
            </div> -->
            <el-row>
              <el-col :span="8">
                <el-form-item label="部门" label-width="100px">
                  <el-input v-model="form.input1" size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="人员" label-width="70px">
                  <el-input v-model="form.input2" size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="是否本人报销" label-width="135px" prop="resource">
                  <el-radio-group v-model="form.radio" @change="changeradio">
                    <el-radio label="是"></el-radio>
                    <el-radio label="否"></el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="报销人手机号" label-width="100px">
                  <el-input v-model="form.input3" size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="报销部门" label-width="70px">
                  <el-input v-model="form.input4" size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="报销单位" label-width="110px">
                  <el-input v-model="form.input5" size="small"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="汇款账户名" label-width="100px">
                  <el-input v-model="form.input6" size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="开户行" label-width="70px">
                  <el-input v-model="form.input7" size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="汇款账户" label-width="110px">
                  <el-input v-model="form.input8" size="small"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="备注" label-width="100px">
                  <el-input v-model="form.desc" size="small" type="textarea"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
          <!-- 发票信息区域 -->
          <el-card class="title2">
            <!-- <p class="title">报销信息</p> -->
            <div class="flex_between">
              <!-- space-between -->
              <span class="title">报销信息</span>
              <!-- <el-button size="small" type="primary">新增</el-button> -->
              <el-link v-if="isZhuSu" type="primary" :underline="false" @click="AddXinXi(model.tableData)">新增</el-link>
            </div>
            <!-- <div slot="header" class="clearfix">
              <span>基本信息</span>
            </div> -->
            <el-form ref="form" :rules="model.rules" :model="model">
              <!-- 报销信息表格区域 -->
              <el-form-item label="报销事由" label-width="80px">
                <el-input v-model="model.reason" size="small"></el-input>
              </el-form-item>
              <el-table :data="model.tableData" size="small " style="width: 100%" border>
                <el-table-column label="序号" width="60" type="index" align="center"></el-table-column>
                <el-table-column label="费用科目" width="140">
                  <template slot-scope="scope">
                    <el-form-item>
                      <el-select v-model="scope.row.tbObj" size="small" placeholder="请选择">
                        <el-option v-for="item in Tboptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                      </el-select>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column prop="price" label="报销金额" width="140" align="center">
                  <template slot-scope="scope">
                    <el-form-item :prop="'tableData.' + scope.$index + '.price'" :rules="model.rules.price">
                      <el-input v-model="scope.row.price" size="small"></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column prop="billsPage" label="单据张数" width="140" align="center">
                  <template slot-scope="scope">
                    <el-form-item :prop="'tableData.' + scope.$index + '.billsPage'" :rules="model.rules.billsPage">
                      <el-input v-model="scope.row.billsPage" size="small"></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="用途" align="center">
                  <template slot-scope="scope">
                    <el-form-item :prop="'tableData.' + scope.$index + '.purpose'">
                      <el-input v-model="scope.row.purpose" size="small"></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="100" align="center">
                  <template slot-scope="scope">
                    <!-- <el-button type="danger" size="mini">删除</el-button> -->
                    <el-button size="small" type="danger" @click="delXinXi(model.tableData,scope.row,scope$index)">删除</el-button>
                    <!-- <el-button type="danger" circle icon="el-icon-delete" @click="delXinXi(scope.$index)"></el-button> -->
                  </template>
                </el-table-column>
              </el-table>
              <div class="flex_between">
                <span>
                  报销金额合计：
                  <span class="redText">24.00</span>
                </span>
                <el-button size="small" type="primary" @click="addTBdata(model.tableData)">增加行</el-button>
              </div>
            </el-form>
          </el-card>
          <el-card>
            <!-- <p class="title">发票信息</p> -->
            <div slot="header" class="space-between">
              <span class="title">发票信息</span>
              <el-button size="small" class="btnfp" type="primary" @click="addpopup = true">选择发票</el-button>
            </div>
            <el-table class="display" :data="MessageTable" style="width: 100%" border highlight-current-row>
              <el-table-column label="序号" type="index" width="60" align="center"></el-table-column>
              <el-table-column prop="genre" label="发票类型" width="150"></el-table-column>
              <el-table-column label="发票号码" width="180">
                <template slot-scope="scope">{{ scope.row.num }}</template>
              </el-table-column>
              <el-table-column prop="purpose" label="发票内容" width="150"></el-table-column>
              <el-table-column prop="price" label="发票金额" width="100" align="right"></el-table-column>
              <el-table-column label="操作" fixed="right" align="center">
                <template slot-scope="scope">
                  <!-- 操作按钮 -->
                  <el-button
                    type="success"
                    size="small"
                    @click="popimg = true"
                  >查看</el-button>
                  <!-- 删除按钮 -->
                  <el-button
                    type="danger"
                    size="small"
                    @click="delFaPiao(MessageTable,scope.row,scope.$index)"
                  >删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <p class="fotterlook">
              <span class="wqsv">
                发票金额合计：
                <span>246.94</span>
              </span>
            </p>
          </el-card>
          <div class="Information">
            <el-button size="small" type="primary" @click="outEvection">保存</el-button>
            <el-button size="small" type="success" @click="outEvection">提交</el-button>
            <el-button size="small" type="danger" @click="handleClose">关闭</el-button>
          </div>
        </el-form>
      </div>
    </el-drawer>

    <!-- 弹出图片 -->
    <el-dialog
      :visible.sync="popimg"
      :append-to-body="true"
      width="45%"
      :class="inctive ? '' : 'el-dialog__body,el-dialog__header'"
    >
      <el-carousel height="400px">
        <el-carousel-item v-for="item in srcList" :key="item.id">
          <el-image style="width: 100%; height: 100%" :src="item.imgUrl"></el-image>
        </el-carousel-item>
      </el-carousel>
      <p class="btn-img" @click="popimg = false">
        <span>X</span>
      </p>
    </el-dialog>
    <!-- 选择发票弹出框 -->
    <el-dialog title="选择发票" :visible.sync="addpopup" :append-to-body="true" width="45%">
      <!-- <div class="fapiaoxuz">选择发票</div> -->
      <el-table
        :data="MessageTable"
        style="width: 100%"
        border
 
        highlight-current-row
      >
        <el-table-column type="selection" align="center"></el-table-column>
        <el-table-column label="序号" width="50" align="center">
          <template slot-scope="scope">{{ scope.$index + 1 }}</template>
        </el-table-column>
        <el-table-column prop="genre" label="发票类型" width="130"></el-table-column>
        <el-table-column label="发票号码" width="140">
          <template slot-scope="scope">{{ scope.row.num }}</template>
        </el-table-column>
        <el-table-column prop="purpose" label="发票内容" width="150"></el-table-column>
        <el-table-column prop="price" label="发票金额" align="right"></el-table-column>
      </el-table>
      <div class="flex">
        <el-button size="small" type="success" @click="addpopup = false">提交</el-button>
        <el-button size="small" type="danger" @click="addpopup = false">关闭</el-button>
      </div>
    </el-dialog>
    <component :is="configName"></component>
  </div>
</template>

<script>
// import imgbx from '@/assets/fapiao.jpg'
import Vue from 'vue'
export default {
  data() {
    var validateprice = (rule, value, cb) => {
      const xiaoishu = /(-)?\d+(\.\d\d)?/
      // (-)?\d+(\.\d\d)?
      if (xiaoishu.test(value)) {
        return cb()
      }
      cb(new Error('输入正确的格式'))
    }
    // 验证单据张数
    var validatebillsPage = (rule, value, callback) => {
      const zhengshu = /^[1-9]\d*$/

      if (zhengshu.test(value)) {
        return callback()
      }
      callback(new Error('请输入正确的张数'))
    }
    return {
      configName: '',
      caiFeiMXPath: {
        configName: 'canFeiMX',
        configFilePath: 'rfcwgl/feiYongBX/append/canFeiMXAppend/index.vue'
        // src\views\rfcwgl\feiYongBX\append\canFeiMXAppend\index.vue
      },
      WindowHeight: 0,
      isZhuSu: 1, // 是否报销住宿
      zhuSuForm: {
        time: 1,
        money: ''
      },
      moneyList: [],
      sumMone: 0,
      direction: 'rtl',
      ishTrav: true,
      labelPosition: 'right',
      inctive: false,
      popimg: false,
      addpopup: false, // 选择发票弹出框
      srcList: [
        { imgUrl: require('@/assets/img/fa(1).jpg'), id: 1 },
        { imgUrl: require('@/assets/img/fa(2).jpg'), id: 2 },
        { imgUrl: require('@/assets/img/fa(3).jpg'), id: 3 }
      ],
      form: {
        input1: '技术部',
        input2: '张三',
        input3: '15537683878',
        radio: '是',
        input4: '技术部',
        input5: '华电',
        input6: '张三',
        input7: '中国农业银行',
        input8: '6217002430085478655',
        desc: '出差补助',
        input9: '2天',
        input10: '120',
        input11: '240',
        input12: '3232',
        input13: '1213',
        input14: '',
        date: '',
        money: ''
      },
      // 发票信息
      MessageTable: [
        {
          id: 1,
          num: '00000000',
          genre: '增值税发票',
          price: '123.82',
          purpose: '出差'
        },
        {
          id: 1,
          num: '00000021',
          genre: '其它发票',
          price: '123.12',
          purpose: '交通'
        }
      ],
      tableData: [
        {
          id: 1,
          cfdate: '2016-05-02',
          cfdidian: '浙江省-杭州市',
          jtfs: '飞机',
          zwdj: '经济舱',
          ddrq: '2016-05-03',
          dddd: '四川省-凉山',
          jtf: 1233
        },
        {
          id: 2,
          cfdate: '2016-05-05',
          cfdidian: '浙江省-宁波市',
          jtfs: '高铁',
          zwdj: '二等座',
          ddrq: '2016-05-06',
          dddd: '河南省-信阳市',
          jtf: 950
        },
        {
          id: 3,
          cfdate: '2016-05-07',
          cfdidian: '河南省-郑州市',
          jtfs: '火车',
          zwdj: '卧铺',
          ddrq: '2016-05-12',
          dddd: '西藏-拉萨',
          jtf: 500
        }
      ],
      Tboptions: [
        {
          value: '飞机',
          label: '飞机'
        },
        {
          value: '火车',
          label: '火车'
        },

        {
          value: '汽车',
          label: '汽车'
        }
      ],
      model: {
        reason: '',
        // 表格里表单的验证
        rules: {
          price: {
            validator: validateprice,
            trigger: 'blur'
          },
          billsPage: {
            validator: validatebillsPage,
            trigger: 'blur'
          }
        },
        // 报销信息数据
        tableData: [
          {
            id: 1,

            price: '12.00',
            billsPage: '12',
            purpose: '团建的餐费',
            tbObj: '餐费'
          },

          {
            id: 2,

            price: '12.00',
            billsPage: '12',
            purpose: '出差的交通',
            tbObj: '交通费'
          }
        ]
      },
    }
  },
  computed: {
    windowHeight() {
      return this.$store.state.windowH.height
    }
  },
  watch: {
    windowHeight: function(old, newd) {
      console.log(old)
      this.WindowHeight = old
    },
    zhuSuForm: {
      handler(newName, oldName) {
        console.log(newName)
        const time = this.zhuSuForm.time ? Number(this.zhuSuForm.time) : 0
        const money = Number(this.zhuSuForm.money.value)
        // console.log(money)
        // console.log(date)
        this.sumMone = time * money
      },
      // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
      // immediate: true,
      deep: true
    }
  },
  mounted() {
    this.WindowHeight = this.$store.state.windowH.height
  },
  created() {
    // this.getMoney()
  },
  methods: {
    openWndow(e) {
      this.configName = Vue.component(e.configName, resolve => {
        require([`@/views/${e.configFilePath}`], resolve)
      })
    },
    handleClose(done) {
      // if (this.loading) {
      //   return
      // }
      this.$confirm('你确定要离开新增吗？')
        .then(_ => {
          this.ishTrav = false
        })
        .catch(_ => {})
    },
    /**
     * 获取住宿补助金额标准
     */
    getMoney() {
      this.$http.get('/api/getMoneys').then(res => {
        // console.log(res.data)
        this.moneyList = res.data
        console.log(this.moneyList)
        this.zhuSuForm.money = this.moneyList[0]
      })
    },
    // qwd(row){
    //   console.log(row)
    // },
    // 判断是否为代为报销

    /**
     * 打开侧拉列表
     */
    openAdd() {
      this.ishTrav = true
    },
    outEvection() {
      // this.ishTrav = false
      console.log(this.caiFeiMXPath)
      this.openWndow(this.caiFeiMXPath)
    },
    close() {
      this.ishTrav = false
      // this.$router.replace({ name: 'chaiLvFBX' })
    },
    changeradio(radio) {
      console.log(radio)
      if (radio === '否') {
        this.form.input6 = ''
        this.form.input7 = ''
        this.form.input8 = ''
      }
      if (radio === '是') {
        this.form.input6 = '张三'
        this.form.input7 = '中国农业银行'
        this.form.input8 = '2434234234234545'
      }
    },
    delFaPiao(data, row, index) {
      // this.MessageTable.splice(index, 1)
      this.$confirm('您确定删除吗？')
        .then(_ => {
          data.splice(index, 1)
        })
        .catch(_ => {})
    },
    addTBdata(ref) {
      console.log(ref.length)
      var obj = {
        id: ref.length + 1,
        price: '',
        billsPage: '',
        purpose: '',
        tbObj: ''
      }
      // obj.tbObj = this.options[0].value
      this.model.tableData.push(obj)
    },
    delXinXi(data, row, index) {
      // data.splice(index, 1)
      this.$confirm('您确定删除吗？')
        .then(_ => {
          data.splice(index, 1)
        })
        .catch(_ => {})
    },
    AddXinXi(data) {
      const ID = data[data.length - 1].id + 1
      const OBJ = {
        id: ID,
        price: '',
        billsPage: '',
        purpose: '',
        tbObj: ''
      }
      data.push(OBJ)
    },
    
  }
}
</script>

<style lang="scss" scoped>
.box {
  height: 100%;
}
::v-deep .el-drawer__body {
  height: 100%;
  overflow: auto;
}
::v-deep .el-drawer__header {
  font-size: 24px;
  color: cornflowerblue;
}
::v-deep .el-card__header{
  border-bottom:none;
}
.Information {
  position: absolute;
  z-index: 99999999;
  bottom: 0px;
  width: 100%;
  background-color: #fff;
  padding: 5px 0px;
  display: flex;
  justify-content: space-evenly;
}
.title {
  font-weight: 500;
  font-size: 20px;
  height: 30px;
  margin: 5px 0px;
}

.top {
  margin-top: 15px;
}
.footer-de {
  margin-top: 15px;
  padding: 0px 15px;
}

</style>
